<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Whole Screen</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no,">
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/mobile-screen-size-plugin.js"></script>
<style>
* {
	margin: 0px;
	padding: 0px;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.container {
	width: 100%;
	height: 100%;
}

@media ( min-width : 768px) {
	.container {
		width: 750px;
		margin: auto;
		padding: 0;
	}
}

header {
	width: 100%;
	height: 5%;
	background-color: #000000;
	color: #ffffff;
}

#firstDiv {
	width: 100%;
	height: 85%;
}

#secondDiv {
	width: 100%;
	height: 10%;
	position: relative;
}

#footer {
	height: 30px;
	position: absolute;
	bottom: 0px;
	background-color: #000000;
	width: 100%;
	color: #ffffff;
}

.row {
	width: 90%;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	margin: 30px 0;
}
</style>
</head>
<body id="bodyContainer" class="container">
	<header> I am header </header>
	<div id="firstDiv">
		<div id="dpr" class="rowFirst"></div>
		<div id="physicsSize" class="row"></div>
		<div id="deviceSize" class="row"></div>
		<div id="bodySize" class="row"></div>
		<div id="gapSize" class="rowBottom"></div>
	</div>
	<div id="secondDiv">
		<div id="footer">I am footer</div>
	</div>
	<script>
		$(function() {
			var dpr = MobileScreen.getDevicePixelRatio();
			$("#dpr").html("device pixel ratio: " + dpr);

			var pw = MobileScreen.getPhysicalScreenWidth();
			var ph = MobileScreen.getPhysicalScreenHeight();
			$("#physicsSize").html(
					"physics width: " + pw + ", physics height: " + ph);

			var dw = MobileScreen.getPixelScreenWidth();
			var dh = MobileScreen.getPixelScreenHeight();
			$("#deviceSize").html(
					"device width: " + dw + ", device height: " + dh);

			var bw = MobileScreen.getBodyWidth();
			var bh = MobileScreen.getBodyHeight();
			$("#bodySize").html("body width: " + bw + ", body height: " + bh);

			var gw = MobileScreen.getGapWidth();
			var gh = MobileScreen.getGapHeight();
			$("#gapSize").html("gap width: " + gw + ", gap height: " + gh);
		});
	</script>
</body>
</html>